import React, { PureComponent } from 'react';
import { Switch, Redirect, Route, Link } from 'react-router-dom';
import { Carousel, Row, Col, List, Avatar, Card, message } from 'antd';
import axios from 'axios'
import './homepage.css';

export default class Home extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      token: sessionStorage.getItem('token')
    }
  }
  componentDidMount() {
    this.getArticle();
  }
  getArticle = () => {
    axios({
      method: 'post',
      url: "http://localhost:8080/article/getAll",
      data: { token: this.state.token }
    }).then((res) => {
      if (res.data.code == 200) {
        this.setState({ data: res.data.data });

      } else {
        message.error("获取文章列表失败")
        throw res;
      }
    }).catch((e) => {
      message.error("获取文章列表失败")
      throw e;
    });
  }
  render() {
    // const data = [
    //   {
    //     id: '1',
    //     title: 'Ant Design Title 1',
    //   },
    //   {
    //     id: '2',
    //     title: 'Ant Design Title 2',
    //   },
    //   {
    //     id: '3',
    //     title: 'Ant Design Title 3',
    //   },
    //   {
    //     id: '4',
    //     title: 'Ant Design Title 4',
    //   },
    // ];
    const data = this.state.data
    return (
      <div>
        <div className='action'>
          <Row>
            <Col span="15">
              <Carousel autoplay>
                <div><img alt="example" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525796488903&di=1c2a2401683a46ac0f404dfc4bd2d0f3&imgtype=0&src=http%3A%2F%2Fimg.baizhan.net%2Fuploads%2Fallimg%2F170421%2F46_170421105224_1.jpg" /></div>
                <div><img alt="example" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3089035910,837232727&fm=27&gp=0.jpg" /></div>
                <div><img alt="example" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=599097939,2122370908&fm=27&gp=0.jpg" /></div>
                <div><img alt="example" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526391546&di=3353e261b2bcd1b3827575bfab617742&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.dugoogle.com%2Fwp-content%2Fuploads%2F2017%2F08%2FEEEEEEE.jpg" /></div>
              </Carousel>
            </Col>
            <Col span="9">
              <List
                style={{ border: 'solid 1px #ccc', boxSizing: 'border-box', marginLeft: '16px' }}
                itemLayout="horizontal"
                dataSource={data}
                renderItem={item => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                      title={<Link to={`/homepage/${item.id}`}>{item.title}</Link>}
                      description={(item.word + "").substring(0, 50) || ""}
                    />
                  </List.Item>
                )}
              />
            </Col>
          </Row>
        </div>
        <div className="action">
          <List
            grid={{ gutter: 16, column: 3 }}
            dataSource={data}
            renderItem={item => (
              <List.Item>
                <Card title={item.title}>{(item.word + "").substring(0, 50) || ""}</Card>
              </List.Item>
            )}
          />
        </div>
      </div>);
  }
}